import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {
    DetailWrapper,
    Header,
    Content
} from './style'
import * as actionCreators from "../detail/store/actionCreators";

class Detail extends Component {
    render() {
        return (
            <DetailWrapper>
                <Header>
                    {this.props.title}
                </Header>
                <Content
                    dangerouslySetInnerHTML={{__html:this.props.content}}
                />
            </DetailWrapper>
        )
    }
    componentDidMount() {
        this.props.getDetail(this.props.match.params.id);
    }
}

const mapStateToProps = (state) => ({
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content'])
});


const mapDispatchToProps = (dispatch) => ({
    getDetail() {
        dispatch(actionCreators.getDetail())
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail))

